<template>
    <commonPage :showHeader="false">
    <scroller
      slot="page_body"
      style="height: 100%"
      ref="my_scroller"
      :on-refresh="refresh"
      :on-infinite="infinite"
      refresh-layer-color="#4b8bf4"
      loading-layer-color="#ec4949"
      class="page_body"
    >
    <div class="all">
      <div class="top">
        <div class="l-top" :class="check_color == 1? 'checked':''" @click="check_num(1)">
          <p>地图模式</p>
        </div>
        <div class="r-top" :class="check_color == 2? 'checked':''" @click="check_num(2)">
          <p>列表模式</p>
        </div>
      </div>
      <div class="content">
        <div class="list" v-show="check_color == 1" v-for="(text,item) in texts" :key="item">
          <div class="l-img">
            <img src="@/assets/img/leifeng.png" width="100%">
          </div>
          <div class="r-text">
            <p class="name">{{text.name}}</p>
            <p class="address"><van-icon name="location" color="#7d8a93" />{{text.address}}</p>
            <p class="xiangxi">{{text.xiangxi}}</p>
          </div>
        </div>

        <div v-show="check_color == 2">
          <div>
            这里是列表模式的内容
          </div>
        </div>
      </div>
      <div class="di">

      </div>
    </div>
    </scroller>
  </commonPage>
</template>
<script>
import commonPage from "../components/common/commonPage";
export default {
  name: "fuwudian1",
  data() {
    return {
      check_color:1,
      texts:[
        {
          img:'',
          name:'温州体育中心学雷锋志愿服务岗',
          address:'地址:鹿城区锦绣路837号附近',
          xiangxi:'查看详情'
        },{
          img:'',
          name:'温州体育中心学雷锋志愿服务岗锋志愿',
          address:'地址:鹿城区锦绣路837号附近',
          xiangxi:'查看详情'
        },{
          img:'',
          name:'温州体育中心学雷锋志愿服务岗中心学雷锋志愿服务岗',
          address:'地址:鹿城区锦绣路837号附近',
          xiangxi:'查看详情'
        },{
          img:'',
          name:'温州体育中心学雷锋志愿服务岗',
          address:'地址:鹿城区锦绣路837号附近',
          xiangxi:'查看详情'
        },{
          img:'',
          name:'温州体育中心学雷锋志愿服务岗',
          address:'地址:鹿城区锦绣路837号附近',
          xiangxi:'查看详情'
        },{
          img:'',
          name:'温州体育中心学雷锋志愿服务岗',
          address:'地址:鹿城区锦绣路837号附近',
          xiangxi:'查看详情'
        },{
          img:'',
          name:'温州体育中心学雷锋志愿服务岗',
          address:'地址:鹿城区锦绣路837号附近',
          xiangxi:'查看详情'
        },
      ]
    };
  },
  created() {
    
  },
  components: {
    commonPage,
  },
  methods: {
    check_num:function(index){
      this.check_color = index
    }
    
  },

};
</script>
<style scoped>
*{
  padding: 0;
  margin: 0;
}
.all{
  width: 100%;  
}
.top{
  width: 100%;
  height: 2.75rem;
  display: flex;
  line-height: 2.75rem;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid #d8e1e7;
}
.l-top,.r-top{
  width: 50%;
  height: 2.75rem;
  background: white;
  color: #36434c;
}
.checked{
  width: 50%;
  height: 2.75rem;
  background: #0282e0;
  color: white;
}
.content{
  background: white;
  padding-left: 1rem;
  padding-right: 1rem;
}
.list{
  padding: 1rem 0;
  border-bottom: 1px solid #d8e1e7;
  display: flex;
}
.l-img{
  padding-right: 0.5rem;
  width: 20%;
  margin: auto 0;
}
.r-text{
  width: 75%;
}
.name{
  color: #013b65;
}
.address{
  color: #7d8a93;
}
.xiangxi{
  color: #7d8a93;
  padding-top: 0.75rem;
}
.di{
  width: 100%;
  height: 2.75rem;
}



</style>